<template>
  <div class="Fullsys">
    <el-header class="wrap_Top">
      <el-row>
        <el-col :span="12">
          <div class="grid-content title">
            <h1>6#系统监测</h1>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content btn">
            <el-button type="primary" @click="controlBtn">控制</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-scrollbar style="height: 100%;" class="scoller">
      <el-main>
        <section class="section_Time">
          <el-row>
            <el-col :span="24">
              <div class="grid-conten">
                <span>
                  最后上报时间：
                  <span>2020-2-22 11:29:00</span>
                </span>
              </div>
            </el-col>
          </el-row>
        </section>
        <section class="systatu">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">系统状态</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">补水</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">加热1</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">加热2</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">供水</span>
                <span class="dot_item"></span>
              </div>
            </div>
          </el-card>
        </section>
        <section class="cloudset">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">云端设定值</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">设定液位</span>
                <span class="value_item">0</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">热泵设定</span>
                <span class="value_item">8000</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电辅热设定</span>
                <span class="value_item">0</span>
              </div>
            </div>
          </el-card>
        </section>
        <section class="monipoint">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">监测点</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">水箱液位1</span>
                <span class="value_item">263</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">水箱液位2</span>
                <span class="value_item">0</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">水箱温度1</span>
                <span class="value_item">3648</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">水箱温度2</span>
                <span class="value_item">0</span>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_lengthitem">回水管温度1</span>
                <span class="value_item">263</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">回水管温度</span>
                <span class="value_item">0</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">水表读数</span>
                <span class="value_item">3648</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电表读数</span>
                <span class="value_item">0</span>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_lengthitem">太阳能回水管温度1</span>
                <span class="value_item">263</span>
              </div>
              <div class="wrap_item">
                <span class="name_lengthitem">太阳能回水管温度2</span>
                <span class="value_item">0</span>
              </div>
            </div>
          </el-card>
        </section>
        <section class="deviceStatu">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">设备状态</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">补水泵</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">热泵1</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">热泵2</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">供水泵</span>
                <span class="dot_item"></span>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">机组1</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">机组2</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电辅热</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">水表</span>
                <span class="dot_item"></span>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">补水开关</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电磁阀开关</span>
                <span class="dot_item"></span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电表</span>
                <span class="dot_item"></span>
              </div>
            </div>
          </el-card>
        </section>
      </el-main>
    </el-scrollbar>
  </div>
</template>

<script src="../../assets/js/sixsubmg/fullsys.js"></script>

<style scoped lang="scss">
.Fullsys {
  > .el-header {
    .el-row {
      .el-col {
        .title {
          height: 36px;
          font-family: ".PingFang SC";
          text-align: right;
          font-size: 16x;
          color: #fff;
          line-height: 36px;
          line-height: 21px;
          font-weight: normal;
          white-space: pre-wrap;
        }
        .btn {
          text-align: right;
          line-height: 4;
          border: none;
        }
      }
    }
  }
  .scoller {
    //background: #f1f1f1;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .el-main {
    //background: #f1f1f1;
    //padding: 0;
    //display: flex;
    height: 700px;
    //position: absolute;
    //top: 0px;
    //left: 0px;
    //bottom: 0;
    //right: 0px;
    //overflow-x: hidden;
    padding: 20px 50px 50px 50px;
    > section {
      margin-top: 15px;
    }
    > .section_Time {
      .el-row {
        .el-col {
          span {
            font-size: 24px;
            color: #fff;
            margin-left: 20px;
          }
        }
      }
    }
    > .systatu {
      margin-left: 20px;
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            display: flex;
            justify-content: space-between;
            .wrap_item {
              display: flex;
              flex-direction: row;
              width: 15%;
              text-align: center;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              span.dot_item {
                width: 32px;
                height: 30px;
                margin-top: 0px;
                margin-left: 12.5%;
                border-radius: 50%;
                background-color: rgb(0, 255, 0);
              }
            }
          }
        }
      }
    }
    > .cloudset {
      margin-left: 20px;
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            display: flex;
            justify-content: space-between;
            .wrap_item {
              display: flex;
              flex-direction: column;
              border: 1px solid #000;
              border-radius: 10px;
              width: 15%;
              text-align: center;
              height: 70px;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              span.value_item {
                font-family: ".PingFang SC";
                font-size: 14px;
                font-weight: normal;
                color: rgb(0, 255, 0);
                line-height: 30px;
              }
            }
          }
        }
      }
    }
    > .monipoint {
      margin-left: 20px;
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .wrap_item {
              display: flex;
              flex-direction: column;
              border: 1px solid #000;
              border-radius: 10px;
              width: 15%;
              text-align: center;
              height: 70px;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              .name_lengthitem {
                height: 96px !important;
                font-size: 24px;
                font-family: ".PingFang SC";
                font-weight: normal;
              }
              span.value_item {
                font-family: ".PingFang SC";
                font-size: 14px;
                font-weight: normal;
                color: rgb(0, 255, 0);
                line-height: 30px;
              }
            }
          }
        }
      }
    }
    > .deviceStatu {
      margin-left: 20px;
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .wrap_item {
              display: flex;
              flex-direction: column;
              border: 1px solid #000;
              border-radius: 10px;
              width: 15%;
              text-align: center;
              height: 85px;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              .name_lengthitem {
                height: 96px !important;
                font-size: 24px;
                font-family: ".PingFang SC";
                font-weight: normal;
              }
              span.dot_item {
                width: 32px;
                height: 30px;
                border-radius: 50%;
                background-color: red;
                margin-left: 40%;
                margin-top: 7px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
